<template>
  <ElCard shadow="never">
    <h1>普通编辑组件（带校验，不带分页）</h1>
    <VEditTable
      :columns="columns"
      :http="getTestList"
      :del-http="delTestData"
      :edit-http="editTestData"
      :params="params"
      v-model:isReload="isReload"
      :handler="handler"
    >
    </VEditTable>

    <hr />

    <CETable
      :columns="columns2"
      :http="getTestList"
      v-model:selectedKeys="selectedKeys"
    >
      <template #extra-l>
        <ElButton>新增</ElButton>
      </template>
    </CETable>
  </ElCard>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import {
  getLineList,
  getTestList,
  delTestData,
  editTestData,
  testGetDetail
} from '@/api/common'
import { EditTableColumn, TableColumn } from '@/components'
import { getAllYear } from '@/utils'
// import { cancelRequest } from '@/request'

const columns: EditTableColumn[] = [
  {
    key: 'indicatorSystemName',
    label: '线条名称',
    width: 200,
    editTable: true,
    renderComponents: {
      el: 'ElInput',
      required: true,
      elAttrs: {
        placeholder: '请输入'
      }
    }
  },
  {
    key: 'yearly',
    label: '年份',
    width: 200,
    editTable: true,
    renderComponents: {
      el: 'CESelect',
      required: true,
      elAttrs: {
        placeholder: '请选择',
        options: getAllYear(6)
      }
    }
  },
  {
    key: 'createdAt',
    label: '地址'
  },
  {
    key: 'editActions',
    label: '操作'
  }
]

const columns2: TableColumn[] = [
  {
    key: 'indicatorSystemName',
    label: '线条名称'
    // width: 60,
    // showTooltip: true,
    // showTootipAttrs: {
    //   effect: 'light',
    // }
  },
  {
    key: 'yearly',
    label: '年份'
  },
  {
    key: 'createdAt',
    label: '地址'
  }
]

const data = ref([])

const params = ref({})

const isReload = ref(false)
const selectedKeys = ref([])

const handler = (data: any) => {
  return {
    indicatorSystemName: data.indicatorSystemName,
    yearly: data.yearly
  }
}

onMounted(() => {
  getLineList().then((res: any) => {
    data.value = res.data.records
  })
})
</script>

<style scoped></style>
